<template>
	<view class="details" style="height: 100vh;background-color: #F9F7F7;position: relative;">
		<view class="time">
			<view class="left">
				<view>{{ user.name }}发起的年审</view>
				<view>{{ user.createtime }}</view>
			</view>
			<view class="right" style="color: #26387C;" v-if="user.typestatus == 0">待审核</view>
			<view class="right" style="color: #23b779;" v-if="user.typestatus == 1">已通过</view>
			<view class="right" style="color: #ed5050;" v-if="user.typestatus == 2">被驳回</view>
		</view>

		<view class="center">
			<view class="leftCenter">
				<view>姓名</view>
				<view>手机号</view>
				<view>类型</view>
				<view>行驶证</view>
			</view>
			<view class="rightCenter">
				<view>{{ user.name }}</view>
				<view @click="getPhone(user.mobile)">
					<image
						:src="require('../../static/phone.png')"
						style="width: 23rpx;height: 23rpx;"
					></image>
					<view>{{ user.mobile }}</view>
				</view>
				<view>年审</view>
				<view>
					<image
						:src="'https://www.chejingjing.cn' + user.xxzimages"
						mode="widthFix"
						style="width: 360rpx;
height: 200rpx;"
					></image>
				</view>
			</view>
		</view>

		<!-- button -->
		<view class="btn" style="position: absolute;bottom: 20rpx;left: 30rpx;">
			<view class="btnerror" @click="btnerror">驳回</view>
			<view class="btnsuccess" @click="btnsuccess">通过</view>
		</view>

		<!-- 底部弹出 -->
		<u-popup :show="show" mode="bottom" overlayOpacity="0.6" :round="0" @close="close" @open="open">
			<view class="popup">
				<view class="popupone">{{ type == 1 ? '通过消息' : '驳回原因' }}</view>
				<view class="input" style="width: 678rpx;margin: 0 auto;margin-top: 30rpx;">
					<u-textarea
						v-model="reason"
						:placeholder="type == 1 ? '可编辑消息发送给用户' : '简单描述驳回原因'"
						height="312rpx"
						style="width: 100%;"
						:maxlength="-1"
						placeholderStyle="color:#999;"
						:cursorSpacing="100"
					></u-textarea>
				</view>
				<view :class="type == 1 ? 'btns' : 'btne'" @click="getTrial(type)">
					{{ type == 1 ? '审核通过' : '确认驳回' }}
				</view>
			</view>
		</u-popup>
		<!-- 底部弹出结束 -->
	</view>
</template>

<script>
import { niandetail, nianshen } from '@/common/api.js';
export default {
	data() {
		return {
			type: -1,
			show: false,
			id: '',
			user: '',
			reason: ''
		};
	},
	methods: {
		getTrial(type) {
			if (this.reason == '') {
				if (type == 1) {
					uni.showToast({
						title: '发送给用户的信息不能为空',
						icon: 'none'
					});
					return;
				} else if (type == 2) {
					uni.showToast({
						title: '请输入你要驳回原因',
						icon: 'none'
					});
					return;
				}
			}
			let params = {
				token: uni.getStorageSync('AnnuallyUser').token,
				id: this.id,
				typestatus: type,
				reason: this.reason
			};
			if (type == 1) {
				nianshen(params).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						uni.showToast({
							title: '审核完成'
						});
						this.getDetails();
						this.show = false;
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/AnnuallyIndex/AnnuallyIndex'
							});
						}, 1500);
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
						this.show = false;
					}
				});
			} else if (type == 2) {
				nianshen(params).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						uni.showToast({
							title: '成功驳回'
						});
						this.getDetails();
						this.show = false;
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/AnnuallyIndex/AnnuallyIndex'
							});
						}, 1500);
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
						this.show = false;
					}
				});
			}
		},
		getPhone(phone) {
			uni.makePhoneCall({
				phoneNumber: phone, //仅为示例
				success: res => {
					console.log(res);
				}
			});
		},
		close() {
			this.show = false;
			this.reason = '';
		},
		open() {
			this.show = true;
		},
		btnerror() {
			this.show = true;
			this.type = 2;
		},
		btnsuccess() {
			this.show = true;
			this.type = 1;
		},
		getDetails() {
			let params = {
				token: uni.getStorageSync('AnnuallyUser').token,
				id: this.id
			};
			niandetail(params).then(res => {
				console.log(res);
				if (res.data.code == 1) {
					this.user = res.data.data;
				}
			});
		}
	},
	onLoad(options) {
		this.id = options.id;
	},
	onShow() {
		this.getDetails();
	}
};
</script>

<style lang="scss" scoped>
.time {
	width: 710rpx;
	height: 150rpx;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	background-color: #ffffff;
	align-items: center;
	.left {
		& > view:nth-child(1) {
			font-size: 34rpx;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			margin-bottom: 10rpx;
		}
		& > view:nth-child(2) {
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}
}
.center {
	width: 750rpx;
	background: #ffffff;
	opacity: 1;
	margin-top: 16rpx;
	display: flex;
	.leftCenter {
		padding-top: 32rpx;
		padding-left: 30rpx;
		margin-right: 42rpx;
		& > view {
			line-height: 80rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
		}
	}
	.rightCenter {
		padding-top: 32rpx;
		& > view {
			line-height: 80rpx;
			&:nth-child(2) {
				display: flex;
				align-items: center;
				color: #23b779;
			}
		}
	}
}
.btn {
	width: 710rpx;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	.btnerror {
		width: 326rpx;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 44rpx;
		text-align: center;
		background: #ed5050;
		opacity: 1;
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff;
	}
	.btnsuccess {
		width: 326rpx;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 44rpx;
		text-align: center;
		background: #23b779;
		opacity: 1;
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff;
	}
}
.success {
	color: #23b779;
}
.error {
	color: red;
}
.popup {
	width: 750rpx;
	height: 602rpx;
	background: #ffffff;
	opacity: 1;
	.popupone {
		margin-left: 36rpx;
		margin-top: 36rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.9);
	}
}
.u-textarea__field {
	width: 678rpx !important;
}
.btns {
	width: 670rpx;
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 44rpx;
	text-align: center;
	background: #23b779;
	font-size: 32rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #ffffff;
	opacity: 1;
	margin: 0 auto;
	margin-top: 20rpx;
}
.btne {
	width: 670rpx;
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 44rpx;
	text-align: center;
	background: #ed5050;
	font-size: 32rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #ffffff;
	opacity: 1;
	margin: 0 auto;
	margin-top: 20rpx;
}
</style>
